<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器：语法：任意选择器：hover[悬停] 每个伪类选择器，具备特点
			              所有元素具备：hover  【常见伪类选择器】
						  */
						 h1:hover{
							background: #aaff00; 
							color: #b2c3ff;
						 }
						 /**
						  * 伪类选择器：link    链接未点击时状态
						  *          :active   链接被点击时状态
						  *          :visited   链家点击在状态 
						  *          :hover     悬停链接时状态
						  * 主要结合在一起，针对a元素效果
						  */
	 a:link{/*未访问状态*/
	 color: #aaff00;
/* 去掉超链接下划线 */
		text-decoration: none;
	}
    a:active{/*被点击时状态*/
		color: #ff557f;
		background: #b2c3ff;
	}
	a:visited{/*点击后状态*/
		color: #00ffff;
		background: #deeaff;
	}
	a:hover{
		font-size: 36px;
	}
	/**
	 * 伪类选择器：input:focus 获取焦点  鼠标点击输入框时效果
	 * 
	 针对 输入框 input元素
	 */
	input:focus{
		background: #00ffff;
	}
	/* 伪类选择器：    ：first-child 第一个儿子元素
	                  ：last-child 最后一个儿子元素
					  ：nth-child(n) 匹配n个儿子元素
		针对：父子级，默认父子级关系table、列表..			 
		 */
		li:first-child{
			background: #00ffff;
			color: #000;
		}
		li:last-child{
			font-size: 15pt;
		}
		li:nth-child(2){
			background: #b2c3ff;
			font-size: 15px;
		}
		li:nth-child(3){
			background: #fffcc9;
			font-size: 15px;
		}
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text" />
		<!-- 元素之间存在父子级关系，默认存在父子关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>